import FormInput from "@/components/public/FormInput";
import { View, Image, Text } from "@tarojs/components";
import ico_jiantou_one from "@/assets/image/ico_jiantou_one.svg";
import { useState } from "react";
import { AtImagePicker } from "taro-ui";
import ico_del_two from "@/assets/image/ico_del_two.svg";
import "./index.scss";
import { uploadFilesList } from "@/helper/utils";
import { classifyAddIndexPost, classifyPost } from "@/services/entities/all";
import ChooseStore from "@/components/view/ChooseStore";

const SingleAd = (props) => {
  const {
    onDelete,
    initValue,
    isAdded,
    onChange,
    onAdd,
    currentIndex,
    typeId,
  } = props;
  console.log("initValue", initValue);
  const [isAddedState, setIsAddedState] = useState(isAdded);
  const [form, setForm] = useState(initValue);
  const [isShow, setIsShow] = useState(false);

  const disabled = isAddedState;

  const handleChange = (key, value, name?) => {
    if (disabled) {
      return;
    }
    const temp = { ...form };
    if (key === "storeId") {
      temp.name = name;
    }
    temp[key] = value;
    onChange(temp);
    setForm(temp);
  };

  const chooseImage = (value: any) => {
    console.log("value", value);
    if (disabled) {
      return;
    }
    uploadFilesList(value).then((res) => {
      handleChange(
        "banner",
        res?.map((item) => item.data)
      );
    });
  };

  const submit = () => {
    const result = {
      imageUrl: form.banner.join(","),
      orderBy: form.orderBy,
      storeId: form.storeId,
      name: form.name,
    };
    if (currentIndex === 0) {
      classifyAddIndexPost(result).then(() => {
        setIsAddedState(true);
        onAdd?.();
      });
    }
    if (currentIndex === 1 || currentIndex === 2) {
      onAdd?.();
    }
  };

  return (
    <View className="child flex-column mt-16 pd-16 pt-32 border-bpx bg-ffffff">
      <View className="dis-flex align-center justify-between">
        <View className="fs-30 lh-42 cl-black dis-flex align-center">
          <Text>{`广告封面`}</Text>
          {isAdded && <View className="is-open flex-center ml-14">已上架</View>}
        </View>

        {!isAdded && (
          <View
            className="submit flex-center cl-007DDB fs-24 pd-lr-24 pd-tb-6 border-box"
            onClick={submit}
          >
            提交
          </View>
        )}
      </View>
      <FormInput
        value={form.orderBy}
        disabled={disabled}
        label="广告排序"
        placeholder="请输入广告排序"
        onChange={(value) => {
          handleChange("orderBy", value);
        }}
      />
      <View className="flex-column bg-FAFAFA pd-lr-18 pd-tb-28 br-16 mt-32">
        <AtImagePicker
          className="picker"
          files={form.banner?.map((item) => {
            return { url: item };
          })}
          count={1}
          multiple={true}
          onChange={(files) => {
            chooseImage(files);
          }}
        ></AtImagePicker>
        <Text className="mt-40 fs-28 lh-38 cl-black">广告链接商家：</Text>
        <View className="dis-flex pd-lr-26 border-box bg-ffffff mt-16">
          <View className="flex-1 fs-26 lh-32 cl-848484 pd-tb-24 border-box">
            商家链接：
          </View>
          <View
            className="border-bottom flex-3 fs-26 lh-32 cl-black pd-tb-24 border-box dis-flex align-center justify-between"
            onClick={() => {
              setIsShow(true);
            }}
          >
            <Text className="fs-24 lh-32 cl-C2C2C2">
              {form.name ? form.name : "请选择商家"}
            </Text>
            <Image src={ico_jiantou_one} className="img-32" />
          </View>
        </View>
        {isShow && (
          <ChooseStore
            isShow={isShow}
            setIsShow={setIsShow}
            onChange={(shop) => {
              handleChange("storeId", shop.value, shop.label);
            }}
          ></ChooseStore>
        )}
      </View>
      <View className="flex-center mt-20" onClick={onDelete}>
        <Image src={ico_del_two} className="img-36" />
        <Text className="ml-8 fs-28 lh-38 cl-E14848">删除</Text>
      </View>
    </View>
  );
};
export default SingleAd;
